@import url('reset.css');

/********
 * styles
 ********/
body{background-color:#FFF;font:10pt Arial,Helvetica,sans-serif;color:#444;}
h1{font:24pt myriad;margin-bottom:4px;}
h2{font-size:20pt;color:#999;font-weight:normal;}

a,a.a1{color:#059;}
a.a2{color:#F22;font-weight:bold;}
a.a3{color:#FFF;}

.describe{font-style:italic;font-size:0.85em;}
.hr{clear:both;margin:10px 2px; border-top:1px solid #CCC;}
.sprt{display:inline-block;width:0px;text-align:center;}

.red{color:#F00 !important;}
.green{color:#080 !important;}
.orange{color:#A50 !important;}

/********
 * layout
 ********/
body{min-width:831px;}
div#wrap-top{border-top:1px solid #AAA;margin:10px 0 30px 0px;}
	div#wrap-top div.toptab-content{background-color:#CCC;font-size:9pt;padding:5px;}
div#wrap-left{position:fixed;width:160px;height:100%;background-color:#FFF;color:#EEE;
border-right:1px solid #888;}
div#wrap-right{margin:8px 20px 0px 180px;}
div#footer{font-size:0.7em;text-align:center;padding:10px;color:#777;text-shadow:0px 1px 1px #FFF;}

/********
 * navigation
 ********/
div#wrap-navi ul li a{color:#666;font:normal 10pt helvetica;display:inline-block;width:130px;}
div#wrap-navi ul > li {padding:6px 0;}
div#wrap-navi ul > li > a{padding-bottom:0px;margin-bottom:0;padding-left:16px;font-weight:bold;}
div#wrap-navi ul li ul{xdisplay:none;}
div#wrap-navi ul li li a{color:#888;font:normal 9pt helvetica;padding:0px 0 0 30px;}
div#wrap-navi ul li.sprt { margin:12px 0; border-top:1px solid #CCC;width:100%; padding:0;}

div#wrap-navi ul li li:hover{background-color:#000;}
div#wrap-navi ul li li:hover a{color:#FFF;text-decoration:none;}
div#wrap-navi ul > li.active{background-color:#000;width:168px;}
div#wrap-navi ul > li.active > a{}
div#wrap-navi ul li li.active a{color:#FFF;text-decoration:none;font-weight:bold;}

nav#top-nav > ul {float:right;}
nav#top-nav > ul li{ float:left; margin:0 4px; }
nav#top-nav > ul li a { color:#555;  font-size:9pt; text-decoration:underline; font-weight:bold; }
nav#top-nav > ul li a:hover {  text-decoration:none; }
nav#top-nav > ul li.sprt{ border-left: 2px solid #CCC; margin:1px 2px; height:15px;}


div#toptab ul li{float:right;margin:0 3px;
background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(200,200,200)),
	color-stop(1, rgb(238,238,238))
);
background-image: -moz-linear-gradient(
	center bottom,
	rgb(200,200,200) 0%,
	rgb(238,238,238) 100%
);
border-bottom-right-radius:4px;
border-bottom-left-radius:4px;
}
div#toptab ul li a{padding:4px 10px;font-size:9pt;color:#666;}
div#toptab ul li a:hover{text-decoration:none;}


/***** 
 *FORM custom component 
 *******/

div.pinstack{width:180px;float:left;-webkit-user-select: none;}
div.pinclearstack{width:70px;float:left;margin-top:4px;-webkit-user-select: none;}
div.sixdigitpin{
   -moz-user-select: none;
   -khtml-user-select: none;
   user-select: none;
   -webkit-user-select: none;
}
span.sixdigitpin{display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;color:white;background-color:#BF0101;margin:3px;cursor:pointer;
	border-radius: 6px;
	text-shadow:0px 1px 1px #570000;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(1, rgb(228,0,0)),
		color-stop(0, rgb(182,0,0))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(182,0,0) 0%,
		rgb(228,0,0) 100%
	);
	}
span.sixdigitpin:hover{
	text-shadow:0px 1px 1px #570000;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(1, rgb(228,0,0)),
		color-stop(0, rgb(182,0,0))
	);
	background-image: -moz-linear-gradient(
		center top,
		rgb(182,0,0) 0%,
		rgb(228,0,0) 100%
	);
}
/************
 * Listing
 **************/
ul.thumb-listing li{float:left;margin:10px;width:114px;height:170px;}
ul.thumb-listing li div.name{color:#222;text-align:center;}
ul.thumb-listing li div.desc{font-size:8pt;color:#222;text-align:center;}

table.grid-listing {width:100%;}
table.grid-listing tr td{color:#222;}
table.grid-listing tr:nth-child(even) {background-color:#F1F1F1;}
table.grid-listing tr th{font-weight:bold;}

div.frame {position:relative;}
div.frame div.tag{position:absolute;bottom:16px;right:0px;font-size:7pt;padding:1px 4px;background-color:#BF0000;border:1px solid #FFF;color:#FFF;}
div.frame div.year{position:absolute;bottom:30px;right:0px;font-size:7pt;padding:1px 4px;background-color:#BF0000;border:1px solid #FFF;color:#FFF;}


/************
 * Paging
 **************/
div.paging {min-height:15px;}
div.paging ul.yiiPager {float:right;}
	div.paging ul.yiiPager li {float:left;display:inline-block;padding:2px 4px;}
		div.paging ul.yiiPager li a{font-weight:normal !important;text-shadow:none !important;}

/********
 * commponent
 ********/
 /* attachment */
img.attachmentico{width:70px;}
div.attachbox{ float:left;width:150px; }
div.attachbox div.attachico{ float:left;width:70px; }
div.attachbox div.attachaction{ float:left;width:40px; display:none; }
div.attachbox:hover div.attachaction{ float:left;width:40px; display:block; }

/********
 *	responsive content
 ********/
div#wrap-navi ul li{ 
    transition:all .2s linear; 
    -o-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -webkit-transition:all .2s linear;
}
@media screen and (max-height:450px) {
	div#wrap-navi ul > li {padding:2px 0;}
	div#wrap-navi ul li.sprt { margin:3px 0; }
}